<!--               -->
<!-- DIALOG LAYOUT -->
<!--               -->
<template name="accounts_dialog">
  <div class="dialog" id="accountsDialog">
    <div class="dialog-box">
      <div class="dialog-content">
        <div class="dialog-body">
          {{> Template.dynamic template=accountsDialogContent}}
        </div>
      </div>
    </div>
  </div>
</template>

<!--          -->
<!-- LOGIN IN -->
<!--          -->
<template name="accounts_login">

  {{> accounts_title title="登录"}}

  <div class="form-group">
    <input type="email" class="form-control" id="loginEmail" placeholder="请输入邮箱"> 
    {{#unless loginValidatedEmail}} 
      {{> accounts_message}} 
    {{/unless}}
  </div>

  {{#unless loginValidatedEmail}}
    <button type="button" class="btn btn-primary btn-block" id="checkLoginEmail">下一步</button>
  {{/unless}} 

  {{#if loginValidatedEmail}}
    <div class="form-group">
      <input type="password" class="form-control" id="loginPassword" placeholder="请输入密码"> 
      {{> accounts_message}}
    </div>
    {{#if loggingIn}}
      {{> accounts_loading}}
    {{else}}
      <button type="button" class="btn btn-primary btn-block" id="login">登录</button>
    {{/if}}
  {{/if}}

  <button type="button" class="btn btn-light btn-block" id="gotoRegister">注册新账号</button>
  
  <a class="font-size-sm" id="gotoReset" style="cursor: pointer;">忘记密码？</a>

</template>

<!--          -->
<!-- REGISTER -->
<!--          -->
<template name="accounts_register">

  {{> accounts_title title="注册"}}

  <div class="form-group">
    <label for="registerEmail">邮箱</label>
    <input type="email" class="form-control" id="registerEmail" placeholder="请输入邮箱">
  </div>

  <div class="form-group register-password">
    <label for="registerPassword">密码</label>
    <input type="password" class="form-control" id="registerPassword" placeholder="请输入密码">
  </div>

  <div class="form-group">
    <label for="registerUsername">用户名</label>
    <input type="text" class="form-control" id="registerUsername" placeholder="请输入用户名"> 
    {{> accounts_message}}
  </div>

  {{#if loggingIn}}
    {{> accounts_loading}}
  {{else}}
    <button type="button" class="btn btn-primary btn-block" id="register">注册</button>
  {{/if}}

  <button type="button" class="btn btn-light btn-block" id="gotoLogin">登录</button>

</template>

<!--                 -->
<!-- FORGOT PASSWORD -->
<!--                 -->
<template name="accounts_forgot_password">

  {{> accounts_title title="忘记密码"}}

  <div class="form-group">
    <label for="forgotPasswordEmail">邮箱</label>
    <input type="email" class="form-control" id="forgotPasswordEmail" placeholder="请输入邮箱"> 
    {{> accounts_message}}
  </div>

  {{#if inForgoting}}
    {{> accounts_loading}}
  {{else}}
    <button type="button" class="btn btn-primary btn-block" id="sendForgotPasswordEmail">下一步</button>
  {{/if}}

  <button type="button" class="btn btn-light btn-block" id="gotoLogin">登录</button>

</template>

<!--                -->
<!-- RESET PASSWORD -->
<!--                -->
<template name="accounts_reset_password">

  {{> accounts_title title="重置密码"}}

  <div class="form-group">
    <label for="newPassword">新密码</label>
    <input type="password" class="form-control" id="newPassword" placeholder="请输入密码">
    {{> accounts_message}}
  </div>

  {{#if loggingIn}}
    {{> accounts_loading}}
  {{else}}
    <button type="button" class="btn btn-primary btn-block" id="resetPassword">确认修改</button>
  {{/if}}
  
  <button type="button" class="btn btn-light btn-block" id="gotoLogin">登录</button>

</template>

<!--                 -->
<!-- CHANGE PASSWORD -->
<!--                 -->
<template name="accounts_change_password">
  <div id="change-password-alert-field"></div>

  <div class="form-group row">
    <label for="staticUsername" class="col-sm-2 col-form-label">用户名</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticUsername" value="{{currentUserName}}">
    </div>
  </div>

  <div class="form-group row">
    <label for="oldPassword" class="col-sm-2 col-form-label">旧密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="oldPassword" placeholder="请输入旧密码">
    </div>
  </div>

  <div class="form-group row">
    <label for="newPassword" class="col-sm-2 col-form-label">新密码</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="newPassword" placeholder="请输入新密码">
      {{> accounts_message}}
    </div>
  </div>

  <div class="form-group row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
      {{#if inReseting}}
        <button type="button" class="btn btn-primary" disabled style="width:90px;">
          <div class="btn-loading"><div></div></div>
        </button>
      {{else}}
        <button type="button" class="btn btn-primary" id="resetPassword">确认修改</button>
      {{/if}}
    </div>
  </div>

</template>

<!--              -->
<!-- VERIFY EMAIL -->
<!--              -->
<template name="accounts_verify_email">
  <div class="mt-4 mx-auto text-center w-75">
    <embed src="/img/svg/mail_send.svg" type="image/svg+xml" class="img-fluid" width="200">
    <h1>Good</h1>
    <p>你已经正式加入卡司群聊。</p>
    <a class="btn btn-primary" href="/i" role="button">进入个人中心</a>
  </div>
</template>

<!--       -->
<!-- TITLE -->
<!--       -->
<template name="accounts_title">
  <div class="text-center mb-3">
    <h5>{{title}}</h5>
  </div>
</template>

<!--         -->
<!-- MESSAGE -->
<!--         -->
<template name="accounts_message">
  {{#if errorMessage}}
    <small class="form-text text-danger">{{errorMessage}}</small>
  {{/if}} 
  {{#if infoMessage}}
    <small class="form-text text-muted">{{infoMessage}}</small>
  {{/if}}
</template>

<!--         -->
<!-- LOADING -->
<!--         -->
<template name="accounts_loading">
  <button type="button" class="btn btn-primary btn-block" disabled>
    <div class="btn-loading"><div></div></div>
  </button>
</template>